import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/dist/logger";
import $ from "jquery";

Vue.use(Vuex);

// console.log(Vuex);
//
// 1. 创建一个共享的vuex仓库对象
//      共享仓库对象的创建方法被记录 Vuex.Store
let store = new Vuex.Store({
  // vuex 的数据存储仓库，用于定义被组件共享的数据变量
  state: {
    msg: "vuex中共享的数据msg",
    num: 100,
    arr: [100, 220],
    user: {
      username: "tom",
    },
    percentage: 0.65,
    // 定义时是空值，在程序运行时，通过异步请求会进行数据加载
    types: [],
  },
  // vuex为仓库state数据提供数据包装方法
  //      用于在不修改仓库变量的情况下，为页面提供转换后的数据，类似于组件的计算属性取值
  getters: {
    perc: function (state) {
      // return state.percentage * 100 + "%";
      return state.percentage * 1000 + "‰";
    },
  },
  // 定义state仓库中变量修改方法，用于在调试工具中记录修改日志
  mutations: {
    setMsg: function (state, nv) {
      state.msg = nv;
      // setTimeout(() => {
      //   state.msg = nv;
      // }, 3000);
    },
    setNum(state, nv) {
      state.num = nv;
    },
    setTypes(state, nv) {
      state.types = nv;
    },
  },
  // vuex 提供的 actions 主要是为了统一管理中央仓库基于ajax异步初始化数据的操作
  actions: {
    loadTypes(store) {
      $.get(
        "http://139.196.82.122:8080/api/v1/index/category",
        ({ code, data, msg }) => {
          if (code == 200) {
            store.commit("setTypes", data);
          } else {
            alert(msg);
          }
        }
      );
    },
  },
  modules: {},

  // 为vuex扩展功能插件
  plugins: [createLogger()],
});

// 2. 导出创建的仓库对象
export default store;

// 3. 在main.js 中导入仓库对象，并进行注册加载
